<template>
   <div>
           <van-nav-bar
  title="栏目管理"
  left-text="返回"
  left-arrow
  @click-left="$router.back()"
/>
<!-- 删除模块 -->
<div class="delete">
        <p>点击删除以下频道</p>
        <ul  class="list" >
            <li class="item" v-for="(item,index) in delActive" :key="item.id" @click="removeItemHandle(index)">{{item.name}}</li>
        </ul>
</div>
<!-- 添加模块 -->
<div class="add" >
        <p>点击添加以下频道</p>
        <ul class="list">
            <li class="item" v-for="(item,index) in addActive" :key="item.id" @click="addHandle(index)">{{item.name}}</li>
        </ul>
</div>
   </div>
</template>

<script>
import { getCategory } from '@/api'
import { getManage, setManage } from '@/untails/local'
export default {
   data () {
       return {
           delActive:[],
           addActive:[]
       }
   },
   watch:{
       delActive(){
           setManage({
               delActive:this.delActive,
               addActive:this.addActive
           })
       }
   },
   mounted(){
    // 获取栏目标题数据
    const {delActive,addActive} =getManage()
    if(delActive){
        this.delActive=delActive
        this.addActive=addActive
    }else{
             getCategory().then((res)=>{
          this.delActive=res.data.data
          setManage({delActive:res.data.data,addActive:[]})
       })
    }
   },
   methods:{
removeItemHandle(index){
    console.log(11);
    if(this.delActive.length===1){
       return this.$toast('至少有一个栏目')
    }
    const res=this.delActive.splice(index,1)
    this.addActive.push(...res)
},
addHandle(index){
    const res=this.addActive.splice(index,1)
    this.delActive.push(...res)
}
   }
}
</script>

<style lang="less" scoped>
 p{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #ccc;
    height: 25px;
    padding: 0 10px;
 }
 .list{
     padding: 0 10px;
     display: flex;
     flex-wrap:wrap;
      .item{
     width:22% ;
     margin: 1%;
     height: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid #ccc;
     font-size: 14px;
     position: relative;
     &.item::after{
         content: "💕";
         position: absolute;
         top: 0;
         right: 0;
         width: 10px;
         height: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
     }
 }
 }

</style>